<template>
    <div>
        <div class="itemMusicList">
            <div class="itemListTop" v-if="subscribedCount">
                <div class="listLeft">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-bofang"></use>
                    </svg>
                    <span>
                        播放全部
                        <span>(共{{ itemList.length }}首) </span>
                    </span>
                </div>
                <div class="listRight">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jia-copy"></use>
                    </svg>
                    <span>收藏({{ subscribedCount }})</span>
                </div>
            </div>
            <div class="itemList">
                <div class="item" v-for="(item, i) in itemList" :key="i">
                    <div class="itemLeft" @click="playMusic(i)">
                        <span class="leftSpan">{{ i + 1 }}</span>
                        <div class="d-flex ai-center">
                            <div class="d-flex ai-center ml-3">
                                <div class="d-flex flex-column">
                                    <p>{{ item.name }}</p>
                                    <div>
                                        <span
                                            v-for="(item1, index) in item.ar"
                                            :key="index"
                                            >{{ item1.name }}|</span
                                        >
                                    </div>
                                </div>
                                <svg
                                    class="icon bofang pr-1"
                                    aria-hidden="true"
                                    v-if="item.fee === 1"
                                >
                                    <use xlink:href="#icon-tipvip"></use>
                                </svg>
                            </div>
                        </div>
                    </div>
                    <div class="itemRight">
                        <svg
                            class="icon bofang"
                            aria-hidden="true"
                            v-if="item.mv != 0"
                        >
                            <use xlink:href="#icon-bofang1"></use>
                        </svg>
                        <svg class="icon liebiao" aria-hidden="true">
                            <use xlink:href="#icon-caidan"></use>
                        </svg>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
    name: "ItemMusicList",
    props: ["subscribedCount", "itemList"],
    methods: {
        //点击列表中的歌曲
        playMusic(i) {
            console.log(i);
            //修改 歌曲列表
            this.UPDATAEPLAYLIST(this.itemList);
            // 修改 当前播放的歌曲
            this.UPDATEPLAYLISTINDEX(i);
            //修改 播放状态
            this.UPDATEISPLAY(true);
        },
        ...mapMutations([
            "UPDATAEPLAYLIST",
            "UPDATEPLAYLISTINDEX",
            "UPDATEISPLAY",
        ]),
    },
    mounted() {
        // console.log("###",this.itemList);
    },
};
</script>

<style lang="less" scoped>
.itemMusicList {
    width: 100%;
    height: 10rem;
    background-color: #fff;
    padding: 0 0.2rem;
    margin-top: 0.2rem;
    border-top-left-radius: 0.4rem;
    border-top-right-radius: 0.4rem;
    .itemListTop {
        width: 100%;
        height: 1rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .listLeft {
            width: 3rem;
            height: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .icon {
                stroke: #333333;
                stroke-width: 20;
            }
            span {
                font-weight: 700;
                span {
                    font-weight: 400;
                    font-size: 0.24rem;
                    color: #999;
                }
            }
        }
        .listRight {
            display: flex;
            align-items: center;
            background-color: red;
            padding: 0.2rem;
            border-radius: 0.4rem;
            color: #fff;
            .icon {
                width: 0.3rem;
                height: 0.3rem;
                fill: #fff;
                margin-right: 0.1rem;
                stroke: #fff;
                stroke-width: 50;
            }
        }
    }
    .itemList {
        width: 100%;
        .item {
            width: 100%;
            height: 1.4rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .itemLeft {
                width: 85%;
                height: 100%;
                display: flex;
                align-items: center;
                .leftSpan {
                    display: inline-block;
                    width: 0.2rem;
                    text-align: center;
                }
                div {
                    p {
                        width: 4.54rem;
                        height: 0.4rem;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        font-weight: 700;
                    }
                    span {
                        font-weight: 400;
                        font-size: 0.24rem;
                        color: #999;
                    }
                }
            }
            .itemRight {
                width: 20%;
                height: 100%;
                display: flex;
                // justify-content: space-between;
                align-items: center;
                position: relative;
                .icon {
                    fill: #999;
                }
                .bofang {
                    position: absolute;
                    left: 0;
                }
                .liebiao {
                    position: absolute;
                    right: 0;
                }
            }
        }
    }
}
</style>